<template>
  <div>
    <button @click="isShow=true">点击打开弹窗</button>
    <Teleport to="body">
        <div v-if="isShow" class="window">
            <h2>8848钛金手机</h2>
            <span>成功不是高瞻远瞩,而是你本来就站在高处</span><br>
            <em>运筹帷幄,掌控未来</em>
            <p>这就是8848,这就是胸怀天下</p>
            <button @click="isShow=false">点击关闭弹窗</button>
        </div>
    </Teleport>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
    name:'Window',
    setup(){
        let isShow = ref(false)
        return {
            isShow
        }
    }
}
</script>

<style>
    .window {
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        height: 200px;
        width: 300px;
        background-color: rgb(0, 255, 242);
        text-align: center;
    }
</style>